<template>
	<div style="height: 100%;overflow-y: hidden;">
		<div style="padding: 10px;border-radius: 16px;background: #fff;margin-bottom: 10px;" class="displayFlexBet">
			<div class="date-item displayFlex">
				<el-date-picker v-model="params.year" type="year" placeholder="选择年" style="border-radius: 40px;width: 60px;text-align: center;"
					:clearable="false" value-format="yyyy" @change="getDet()">
				</el-date-picker>
				<i class="el-icon-caret-bottom" style="margin-bottom: 6px;color: #999;"></i>
			</div>
		</div>
		
		<div class="displayFlex" style="background: #fff;padding: 10px 20px;border-radius: 16px;margin-bottom: 10px;font-size: 14px;color: #999;">
			<div style="flex: 1;">时间</div>
			<div style="flex: 1;">类别</div>
			<div style="flex: 2;text-align: center;">内容</div>
			<div style="flex: 3;">说明</div>
			<div style="flex: 1;">负责人</div>
			<div style="flex: 1;">状态</div>
		</div>
		
		<div style="height: calc(100% - 80px);overflow-y: auto;overflow-x: hidden;">
			<div v-for="(item,index) in dataList" :key="index">
				<!-- <div style="font-weight: bold;font-size: 16px;"></div> -->
				<div v-for="(item1,index1) in item.itemList" :key="index1">
					<!-- <div style="margin-bottom: 10px;font-weight: 500;font-size: 14px;">{{item.month}}{{item1.day}}</div> -->
					<div v-for="(item2,index2) in item1.itemList" :key="index2"
						style="background: #fff;padding: 10px 20px;border-radius: 16px;margin-bottom: 10px;font-size: 14px;">
						<div class="displayFlex">
							<div style="flex: 1;">{{item2.year}}-{{item2.monthStr}}-{{item2.dayStr}}</div>
							<div style="flex: 1;">{{item2.scheduleTypeStr}}</div>
							<div style="flex: 2;text-align: center;">{{item2.content}}</div>
							<div style="flex: 3;">{{item2.remark}}</div>
							<div style="flex: 1;">{{item2.executeByName}}</div>							
							<div style="flex: 1;">
								<el-tag v-if="item2.status == 'WAIT_COMPLETE' || item2.status == 'NOT_CONSUMMATE'" type="warning">{{item2.statusStr}}</el-tag>
								<el-tag v-else-if="item2.status == 'HAVE_COMPLETE'" type="success">{{item2.statusStr}}</el-tag>
								<el-tag v-else-if="item2.status == 'OVER_TIME'" type="danger">{{item2.statusStr}}</el-tag>
								<el-tag v-else type="primary">{{item2.statusStr}}</el-tag>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import moment from 'moment'
	let that
	export default {
		data() {
			return {
				params: {
					year: moment().format('YYYY'),
				},
				dataList: []
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.getDet()
		},

		methods: {
			getDet() {
				that.ajax({
					url: '/documentEntSchedule/getDocumentEntScheduleYearReportList?ticketId=' +
						that.params.ticketId,
					contentType: 'application/json',
					data: JSON.stringify(that.params),
					success: function(result) {
						that.dataList = result.data
					},
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.date-item>>>.el-input__prefix,
	.date-item>>>.el-input__suffix {
		display: none !important;
	}

	.date-item>>>.el-input__inner {
		height: 30px !important;
		padding: 0 2px 3px !important;
		font-size: 10px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #333 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 16px !important;

	}

	.el-col-20 {
		height: 60px;
		line-height: 60px;
		overflow-y: scroll;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}
</style>
